<template>
  <header>
    <h1 style="color: white;user-select: none" @click="gotoHome">校园失物招领平台</h1>
    <div class="search">
      <el-input
        placeholder="请搜索您丢失的宝贝"
        v-model="input"
        clearable>
      </el-input>
      <el-button icon="el-icon-search" circle type="info" @click="search"></el-button>
    </div>
    <div class="push">
      <el-button type="info" round @click="pushMessage">我要发布</el-button>
    </div>
    <div class="user">
      <el-dropdown trigger="click" size="mini">
        <span class="el-dropdown-link">
          <h3 style="color: white;user-select: none" v-model="userName">{{ userName }}</h3>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="gotoLogin">登录</el-dropdown-item>
          <el-dropdown-item @click.native="gotoRegister">注册</el-dropdown-item>
          <el-dropdown-item @click.native="gotoHome">主页</el-dropdown-item>
          <el-dropdown-item @click.native="logout">登出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </header>
</template>

<script>
import request from "../../../nuist-lostfound-backstage-vue/src/utils/request";
import {createNamespacedHelpers} from "vuex";

const {mapActions: loginMapActions} = createNamespacedHelpers("userlogin");
export default {
  name: 'TopBar',
  data() {
    return {
      input: '',
      userName: ''
    }
  },
  methods: {
    ...loginMapActions(["isLogin"]),
    async pushMessage() {
      if (await this.isLogin()) {
        await this.$router.push({name: "details"});
      } else {
        this.$message.error({
          message:"请先登录"
        });
        await this.$router.push({name: "login"});
      }
    },
    search() {
      this.$message.warning({
        message:"功能开发中....敬请期待！"
      })
    },
    gotoLogin() {
      this.$router.push({name: "login"});
    },
    gotoRegister() {
      this.$router.push({name: "register"});
    },
    gotoHome() {
      this.$router.push({name: "window"});
    },
    async logout() {
      try {
        const response = await request.get("/api/logout");
        if (response.data.success) {
          this.$message({
            showClose: true,
            message: '登出成功,等你回来！',
            type: 'success'
          });
          localStorage.clear();
          setTimeout(() => {
            this.$router.push({name: "login"});
          }, 1000);
        }
      } catch (error) {
        this.$message({
          showClose: true,
          message: '发生意外！',
          type: 'error'
        });
      }
    }
  },
  mounted() {
    if (localStorage.getItem('userName') !== null) {
      this.userName = localStorage.getItem('userName');
    } else {
      this.userName = '去登录做一个有身份的人吧';
    }
  }
}
</script>

<style lang="scss">
header {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
}

.search {
  display: flex;
  height: 100%;
  align-items: center;
  position: absolute;
  left: 50vw;

  .el-button {
    margin-left: 5px;
  }
}

.push {
  display: flex;
  height: 100%;
  align-items: center;
  position: absolute;
  left: 75vw;
}

.user {
  display: flex;
  height: 100%;
  align-items: center;
  position: absolute;
  right: 0.5vw;
}
</style>
